import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xmshop/app/routes/app_pages.dart';
import 'package:xmshop/app/services/httpsClient.dart';
import 'package:xmshop/app/services/screenAdapter.dart';

import '../controllers/product_list_controller.dart';

class ProductListView extends GetView<ProductListController> {
  const ProductListView({super.key});
  Widget _productListWidget() {
    return Obx(
      () => controller.plistItem.isNotEmpty
          ? ListView.builder(
              controller: controller.scrollController,
              padding: EdgeInsets.fromLTRB(
                ScreenAdapter.width(26),
                ScreenAdapter.height(130),
                ScreenAdapter.width(26),
                ScreenAdapter.height(26),
              ),
              itemCount: controller.plistItem.length,
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    Container(
                      padding: EdgeInsets.all(ScreenAdapter.width(5)),
                      margin: EdgeInsets.only(bottom: ScreenAdapter.height(16)),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Row(
                        children: [
                          Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(60)),
                            width: ScreenAdapter.width(400),
                            height: ScreenAdapter.height(460),
                            child: Image.network(
                              HttpsClient.replaeUri(
                                controller.plistItem[index].pic,
                              ),
                              fit: BoxFit.fitHeight,
                              errorBuilder: (context, error, stackTrace) {
                                // 加载失败时显示占位图
                                //return Image.asset('assets/placeholder.png');
                                // 或者显示错误图标
                                return Icon(Icons.broken_image, size: 50);
                              },
                            ), //高度铺满，宽度自适应
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                    bottom: ScreenAdapter.height(20),
                                  ),
                                  child: Text(
                                    "${controller.plistItem[index].title}",
                                    style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(42),
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(
                                    bottom: ScreenAdapter.height(20),
                                  ),
                                  child: Text(
                                    "${controller.plistItem[index].subTitle}",
                                    style: TextStyle(
                                      fontSize: ScreenAdapter.fontSize(34),
                                    ),
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.only(
                                    bottom: ScreenAdapter.height(20),
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Column(
                                          children: [
                                            Text(
                                              "CUP",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                            Text(
                                              "Hello G25",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Expanded(
                                        child: Column(
                                          children: [
                                            Text(
                                              "高清拍摄",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                            Text(
                                              "1300万像素",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Expanded(
                                        child: Column(
                                          children: [
                                            Text(
                                              "超大屏",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                            Text(
                                              "6.1 寸",
                                              style: TextStyle(
                                                fontSize:
                                                    ScreenAdapter.fontSize(34),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Text(
                                  "￥${controller.plistItem[index].price}起",
                                  style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(38),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    (index == controller.plistItem.length - 1)
                        ? _progressIndicator()
                        : const Text(""),
                  ],
                );
              },
            )
          : _progressIndicator(),
    );
  }

  Widget _subHeaderWidget() {
    return Positioned(
      left: 0,
      right: 0,
      top: 0,
      child: Container(
        height: ScreenAdapter.height(120),
        width: ScreenAdapter.width(1080),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              width: ScreenAdapter.height(1),
              color: Color.fromRGBO(233, 233, 233, 0.9),
            ),
          ),
        ),
        child: Row(
          children: controller.subHeaderList.map((value) {
            return Obx(
              () => Expanded(
                flex: 1,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    InkWell(
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(
                          0,
                          ScreenAdapter.height(16),
                          0,
                          ScreenAdapter.height(16),
                        ),
                        child: Text(
                          "${value["title"]}",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: controller.selectHeaderId == value["id"]
                                ? Colors.red
                                : Colors.black45,
                            fontSize: ScreenAdapter.fontSize(32),
                          ),
                        ),
                      ),
                      onTap: () {
                        controller.changeSelect(value["id"]);
                      },
                    ),
                    _showIcon(value["id"]),
                  ],
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  //自定义箭头组件
  Widget _showIcon(id) {
    if (id == 2 || id == 3) {
      if (controller.subHeaderListSort.value == 1 ||
          controller.subHeaderListSort.value == -1) {
        if (controller.subHeaderList[id - 1]["sort"] == 1) {
          return Icon(
            Icons.arrow_drop_down,
            color: controller.selectHeaderId == id
                ? Colors.red
                : Colors.black54,
          );
        } else {
          return Icon(
            Icons.arrow_drop_up,
            color: controller.selectHeaderId == id
                ? Colors.red
                : Colors.black54,
          );
        }
      } else {
        return const Text("");
      }
    } else {
      return const Text("");
    }
  }

  Widget _progressIndicator() {
    if (controller.hasData.value) {
      return const Center(child: CupertinoActivityIndicator());
    } else {
      return const Center(child: Text("没有数据了哦，我是有底线的"));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: controller.globalKey,
      endDrawer: Drawer(child: DrawerHeader(child: Text("右侧筛选"))),
      backgroundColor: const Color.fromRGBO(246, 246, 246, 1),
      appBar: AppBar(
        actions: [Text("")], //可以去掉右侧图标按钮
        title: Container(
          width: ScreenAdapter.width(900),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30),
          ),
          child: InkWell(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsetsGeometry.fromLTRB(
                    ScreenAdapter.width(34),
                    0,
                    ScreenAdapter.width(10),
                    0,
                  ),
                  child: Icon(Icons.search),
                ),
                Text(
                  controller.keywords ?? "",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                ),
              ],
            ),
            onTap: () {
              Get.offAndToNamed(Routes.SEARCH);
            },
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        //内容滚动时阴影高度,去阴影
        scrolledUnderElevation: 0,
        elevation: 0,
      ),
      body: Stack(children: [_productListWidget(), _subHeaderWidget()]),
    );
  }
}
